<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 



<form:form modelAttribute="UsersForm">
	<table style="width:500px;border:1px solid #D2D9E7;">						
		<tr class="trContent">
			<td style="background-color:#DBDBDB;width:20%;text-align: right;font-weight: 600;padding-right: 10px;">
				帳號
			</td>
			<td style="width:80%;text-align: left;letter-spacing: 4px;padding-left: 10px;">
				<table style="width:100%;border-collapse:collapse;border:0;">
					<tr>
						<td style="border:0px;width:85%;">
							${UsersForm.username }	
						</td>
						<td style="border:0px;width:15%;position: relative;top: 5px;">
							&nbsp;
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr class="trContent" id="TR_FULLNAME" onmousemove="showicon('FULLNAME');" onmouseout="hideicon('FULLNAME');">
			<td style="background-color:#DBDBDB;text-align: right;font-weight: 600;padding-right: 10px;">
				全名
			</td>
			<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
				<table style="width:100%;border-collapse:collapse;border:0;">
					<tr>
						<td style="border:0px;width:85%;">
							<span id="SHOW_FULLNAME">
								${UsersForm.fullname }
							</span>
							<span id="EDIT_FULLNAME" style="display:none;">
								<form:input path="fullname" cssClass="bar_1" cssStyle="width:300px;" id="INPUT_FULLNAME"/>
							</span>
						</td>
						<td style="border:0px;width:15%;position: relative;top: 5px;text-align: center;">
							<span onclick="edit('FULLNAME');" style="cursor: pointer;display:none;" id="CONFICON_FULLNAME">
								<img src="${appPath }/resource/image/pencil.png" border="0"/>
							</span>
							<span style="display:none;" id="EDITICON_FULLNAME">
								<a href="javascript:void(0);" onclick="editsubmit('FULLNAME');">
									<img src="${appPath }/resource/image/check2.png" border="0" />
								</a>&nbsp;
								<a href="javascript:void(0);" onclick="cancel('FULLNAME');">
									<img src="${appPath }/resource/image/refresh2.png" border="0"/>
								</a>
							</span>
						</td>
					</tr>
				</table>						
			</td>
		</tr>
		<tr class="trContent" id="TR_EMAIL" onmousemove="showicon('EMAIL');" onmouseout="hideicon('EMAIL');">
			<td style="background-color:#DBDBDB;text-align: right;font-weight: 600;padding-right: 10px;">
				信箱
			</td>
			<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
				<table style="width:100%;border-collapse:collapse;border:0;">
					<tr>
						<td style="border:0px;width:85%;">
							<span id="SHOW_EMAIL">
								${UsersForm.email }	
							</span>
							<span id="EDIT_EMAIL" style="display:none;">
								<form:input path="email" cssClass="bar_1" cssStyle="width:300px;" id="INPUT_EMAIL"/>
							</span>
						</td>
						<td style="border:0px;width:15%;position: relative;top: 5px;text-align: center;">
							<span onclick="edit('EMAIL');" style="cursor: pointer;display:none;" id="CONFICON_EMAIL">
								<img src="${appPath }/resource/image/pencil.png" border="0"/>
							</span>
							<span style="display:none;" id="EDITICON_EMAIL">
								<a href="javascript:void(0);" onclick="editsubmit('EMAIL');">
									<img src="${appPath }/resource/image/check2.png" border="0" />
								</a>&nbsp;
								<a href="javascript:void(0);" onclick="cancel('EMAIL');">
									<img src="${appPath }/resource/image/refresh2.png" border="0"/>
								</a>
							</span>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr class="trContent" id="TR_ROWPERPAGE" onmousemove="showicon('ROWPERPAGE');"  onmouseout="hideicon('ROWPERPAGE');">
			<td style="background-color:#DBDBDB;text-align: right;font-weight: 600;padding-right: 10px;">
				每頁筆數
			</td>
			<td style="text-align: left;letter-spacing: 4px;padding-left: 10px;">
				<table style="width:100%;border-collapse:collapse;border:0;">
					<tr>
						<td style="border:0px;width:85%;">
							<span id="SHOW_ROWPERPAGE">
								${UsersForm.row_per_page }	
							</span>
							<span id="EDIT_ROWPERPAGE" style="display:none;">							
								<form:select path="row_per_page" cssStyle="width:70px" cssClass="bar_1" id="INPUT_ROWPERPAGE">
									<form:option value="10" />
									<form:option value="20" />
									<form:option value="50" />
									<form:option value="100" />
								</form:select>
							</span>
							
						</td>
						<td style="border:0px;width:15%;position: relative;top: 5px;text-align: center;">
							<span onclick="edit('ROWPERPAGE');" style="cursor: pointer;display:none;" id="CONFICON_ROWPERPAGE">
								<img src="${appPath }/resource/image/pencil.png" border="0"/>
							</span>
							<span style="display:none;" id="EDITICON_ROWPERPAGE">
								<a href="javascript:void(0);" onclick="editsubmit('ROWPERPAGE');">
									<img src="${appPath }/resource/image/check2.png" border="0" />
								</a>&nbsp;
								<a href="javascript:void(0);" onclick="cancel('ROWPERPAGE');">
									<img src="${appPath }/resource/image/refresh2.png" border="0"/>
								</a>
							</span>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</form:form>